<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('支付宝生活号')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_locations('支付宝生活号', '关键字管理', '查看信息')"></div>
		
		<div class="layui-row  yy-margin-top-10">
		
			<fieldset class="layui-col-md8">
				<legend><a>基本信息</a></legend>
				<form class="layui-form" method="post">
				<!-- 查询 -->
					<div class="layui-colla-item">
						<div class="layui-form layui-form-pane">
							<input type="hidden" name="id" th:value="${keyword.id}">
							
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">标题</label>
								<div class="layui-input-block">
									<input th:value="${keyword.title}" type="text" name="title" autocomplete="off" class="layui-input" lay-verify="required" maxlength="20" placeholder="请输入关键字标题">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">KEYCODE</label>
								<div class="layui-input-block">
									<input th:value="${keyword.keycode}" type="text" name="keycode" autocomplete="off" class="layui-input" lay-verify="required" maxlength="10" placeholder="请输入关键字KEY">
								</div>
							</div>
							
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">操作类型</label>
								<div class="layui-input-block">
									<input type="radio" th:disabled="${keyword.id ne '-1'}" name="operation" lay-filter="operation" title="发送消息" value="2" th:checked="${ (keyword.operation eq 2) or ( keyword.operation ne 1 and keyword.operation ne 2 ) }" />
									<input type="radio" th:disabled="${keyword.id ne '-1'}" name="operation" lay-filter="operation" title="调用服务" value="1" th:checked="${ (keyword.operation eq 1) }" />
								</div>
							</div>
							
							<div class="layui-form-item" operation="2">
								<label class="layui-form-label layui-bg-orange">消息类型</label>
								<div class="layui-input-block">
									<input type="radio" th:disabled="${keyword.id ne '-1'}" name="type" lay-filter="type" title="文本消息" value="1" th:checked="${ (keyword.type eq 1) or ( keyword.type ne 1 and keyword.type ne 2)}" />
									<input type="radio" th:disabled="${keyword.id ne '-1'}" name="type" lay-filter="type" title="图文消息" value="2" th:checked="${ (keyword.type eq 2) }" />
								</div>
							</div>
							
							<div class="layui-form-item" operation="1">
								<label class="layui-form-label layui-bg-orange">服务地址</label>
								<div class="layui-input-block">
									<input th:value="${keyword.serverurl}" type="text" name="serverurl" autocomplete="off" class="layui-input" lay-verify="required" maxlength="200" placeholder="请输入关键字KEY">
								</div>
							</div>
							
							<!-- 选中的消息id,如果选中的操作类型是发送消息，这个才需要验证 -->
							<input name="msgid" type="hidden" lay-verify="msgid" th:value="${msgid}">
							
							<!-- 显示消息表格 -->
							<div class="layui-form-item" operation="2">
								<label class="layui-form-label layui-bg-orange">已选消息</label>
								<div class="layui-input-block">
									<!-- 当前关键字所关联消息的列表 -->
									<table id="keywordmessageTable" lay-filter="keyword"></table>
								</div>
							</div>
							
							<!-- 选择消息的列表 -->
							<div class="layui-form-item" operation="2">
								<label class="layui-form-label layui-bg-orange">已选消息</label>
								<div class="layui-input-block">
									<!-- 当前关键字所关联消息的列表 -->
									<table id="messageTable" lay-filter="message"></table>
								</div>
							</div>
							
							<!-- 提交及取消按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<a class="layui-btn yy-float-right" href="javascript:window.location.href='/keyword/keywordList';">返回</a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
			
			<fieldset class="layui-col-md3">
				<legend><a>预览</a></legend>
				<div class="layui-colla-item">
					<div class="layui-row yy-div-border" th:each="msg, iterStat:${previewList}" th:if="${iterStat.index eq 0 and msg.type eq 2}">
						<img style="width: 400px; height: 210px;" th:src="@{${msg.imageUrl eq null} ? '/images/default/message_default.png' : ${msg.imageUrl}}">
						<div th:if="${iterStat.index eq 0}" style="position:absolute; top:192px; left:11px; line-height:3; width:400px; background-color:rgba(0,0,0,0.5);">
							<p style="width:400px; color: #FFFFFF; margin-left: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" th:text="${msg.title}"></p>
						</div>
					</div>
					
					<div class="layui-row yy-div-border" th:each="msg, iterStat:${previewList}" th:if="${iterStat.index eq 0 and msg.type eq '1'}">
						<p th:text="${msg.content}"></p>
					</div>
					
					<div class="layui-row yy-div-border" th:each="msg, iterStat:${previewList}" th:if="${iterStat.index ne 0 and msg.type eq 2}">
						<img th:if="${iterStat.index ne 0}" 
							class="yy-float-right yy-margin-right-10"
							style="width: 100px; height: 60px; padding: 10px;"
							th:src="@{${msg.imageUrl eq null} ? '/images/default/message_default.png' : ${msg.imageUrl}}">

						<p th:if="${iterStat.index ne 0}" 
							style="margin-left: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" 
							th:styleappend="${iterStat.index eq 0} ? 'margin-top:300px;'" th:text="${msg.title}">
						</p>
					</div>
					
				</div>
			</fieldset>
			
		</div>
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script th:inline="none">
	/*<![CDATA[*/
	
	var tableObj;
	var msgTableObj;
	var table;
		
	;!function(){
		//初始化副文本编辑器
		var form = layui.form,table = layui.table;
		
		//获取选中的消息类型
		var type = $("input[name=type]:checked").val();
		
		//获取选中的操作类型
		var operation = $("input[name=operation]:checked").val();
		showOperation(operation);
		
		//加载已选择消息的数据表格
		tableObj = table.render({
			elem:"#keywordmessageTable",
			id:"keywordmessageTable",
			loading:true,
			url:"/keyword/selectMessageByKeywordId",
			where:{
				keywordid:$("input[name=id]").val()
			},
			skin:"line",
			even:true,
			cols:[[
				{field:"type", title:"消息类型", width:90, fixed:true, templet:'#typeTemp'},
				{field:"content", title:"文本内容",width:120},
				{field:"title", title:"图文标题",width:120},
				{field:"seq", title:"顺序", width:70, edit:"text"},
				{field:"id", title:"删除", width:100, fixed:'right', toolbar:'#delTmp'}
			]],
			page:true,
			height:'full',//自适应高度，数据多高表格多高
			limits:[10,30,50,100],
			limit:10,
			size:'lg'
		});
		
		//加载选择消息的数据表格
		msgTableObj = table.render({
			elem:"#messageTable",
			id:"messageTable",
			loading:true,
			url:"/message/messageTable",
			where:{
				type:type
			},
			skin:"line",
			even:true,
			cols:[[
				{field:"id", title:"id", fixed:'left', checkbox:true},
				{field:"type", title:"消息类型", fixed:true, templet:'#typeTemp', width:90},
				{field:"content", title:"文本内容", width:120},
				{field:"title", title:"图文标题", width:120}
			]],
			page:true,
			height:'full',//自适应高度，数据多高表格多高
			limits:[10,30,50,100],
			limit:10,
			size:'lg'
		});
		
		form.verify({
			msgid:function(value, item){
				//判断用户是否已经了消息
				if(null == value || value == ''){
					return '请选择消息!';
				}
				
				//如果是文本消息，用户只可以选择一个,获取用户选中表格数据，并且判断是不是文件消息
				var type = $("input[name=type]:checked").val();
				var checkStatus = $("input[name=msgid]").val();
				if(1 == type) {//文件消息，判断用户选中了多少条数据
					if(checkStatus.split(",").length <= 0 || checkStatus.split(",").length > 1){
						return '请选择并且只能选择一个文本消息!';
					}
				} else if(2 == type){
					if(checkStatus.split(",").length <= 0 || checkStatus.split(",").length > 5){
						return '请选择并且最多只能选择五条图文消息!';
					}
				}
			}
		});
		
		//表单提交事件
		form.on('submit(role)', function(data){
			
			$.http.submitForm({
				url:"/keyword/savekeyword",
				data:data.field,
				success:function(r){
					if(r && r.success){
						$.prompt.alert(r.msg, '/keyword/keywordform/'+r.id);
					} else {
						$.prompt.alert(r.msg, null);
					}
				}
			});
			
			return false; //阻止表单跳转。因为使用ajax所以这里阻止表单的自动跳转
		});
		
		//监控消息类型单选的点击事件
		form.on('radio(type)', function(data){
			var value = data.value;
			if(value == 3){
				fushTable(2);
			} else {
				fushTable(value);
			}
		}); 
		
		//监控操作类型的点击事件
		form.on('radio(operation)', function(data){
			var value = data.value;
			showOperation(value);
		});
		
		//监控选择消息数据表格的选择事件
		table.on('checkbox(message)', function(obj){
			var checked = obj.checked;
			if(checked){//表示选中,获取表格中所有的选项
				var checkStatus = table.checkStatus('messageTable');
				var arr = checkStatus.data;
				if(arr.length > 5) {
					$.prompt.alert("请多可以选择五条消息!");
					return;
				}
				var msgid = "";
				$.logs.info(arr.length);
				for (var i = 0; i < arr.length; i++) {
					var obj = arr[i];
					var id = obj.id;
					if(i > 0){
						msgid += ","
					}
					msgid += id;
				}
				$.logs.info(msgid);
				$("input[name=msgid]").val(msgid);
			} else {//表示取消选中,清空msgid隐藏域 
				$("input[name=msgid]").val("");
			}
		});
		
		//监控已经选择的消息列表的编辑事件
		table.on("edit(keyword)", function(obj){
			var row = obj.data;
			var id = row.id;//消息id
			var seq = row.seq;
			
			var keyid = $("input[name=id]").val();
			
			if(!$.vali.positiveInteger(seq)){
				$.prompt.alert("请输入正整数!", '/keyword/keywordform/'+keyid);
				return;
			}
			
			$.http.submitForm({
				url:"/keyword/updateMsgSeq",
				data:{
					id:id,//消息id
					seq:seq,//顺序
					keyid:keyid//关键字id
				},
				success:function(r){
					if(r && r.success){
						$.prompt.alert(r.msg, '/keyword/keywordform/'+keyid);
					} else {
						$.prompt.alert(r.msg, null);
					}
				}
			});
		});
		
	}();
	
	
	//刷新表格
	function fushTable(type){ 
		msgTableObj.reload({
			where:{
				type:type
			}
		});
		
	}
	
	//隐藏或者显示操作类型对应的文本框
	function showOperation(operation){
		if(operation == 1){//发送消息
			$("div[operation=2]").each(function(){
				$(this).hide();
			});
			$("div[operation=1]").each(function(){
				$(this).show();
			});
			//调用服务地址增加验证属性
			$("input[name=serverurl]").attr("lay-verify", "required");
			//发送消息去掉验证属性
			$("input[name=msgid]").attr("lay-verify", "");
		} else if(operation == 2) {//调用服务
			$("div[operation=2]").each(function(){
				$(this).show(); 
			});
			$("div[operation=1]").each(function(){
				$(this).hide();
			});
			//调用服务地址去除验证属性
			$("input[name=serverurl]").attr("lay-verify", "");
			//发送消息增加验证属性
			$("input[name=msgid]").attr("lay-verify", "msgid");
		}
	}
	
	//删除与关键字关联的消息
	function delMsg(id){
		var keywordid = $("input[name=id]").val();
		$.prompt.delPromptBox("确定要从关键字中移动吗?", "/keyword/removeMessagesFromKeywords/"+keywordid+"/"+id, '/keyword/keywordform/'+keywordid);
	}
	
	/*]]>*/
	</script>
	
	<script type="text/html" id="typeTemp">
	{{#  if(d.type == 1){ }}
		<span class="yy-text-color-red">文本消息</span>
	{{#  } else if(d.type == 2) { }}
		<span class="yy-text-color-blue">图文消息</span>
	{{#  } }}
	</script>
	
	<script type="text/html" id="delTmp">
	<span class="yy-text-color-red yy-cursor-pointer" onclick="delMsg('{{d.id}}');">删除</span>
	</script>
	
	
</body>

</html>